<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box">
      <div class="popupbody-title">
        <span>编辑添加设备版本</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:30px 30px;">
        <el-form :model="editForm" label-width="120px" ref="editForm">
          <el-form-item label="设备版本:" prop="name">
            <el-input v-model="editForm.version" auto-complete="off" placeholder="设备版本"></el-input>
          </el-form-item>
          <el-form-item label="文件地址:" prop="section_id">
            <el-upload
                class="upload-demo"
                :action="$uploadImg"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :before-upload="beforeAvatarUpload"
                accept=".doc,.docx,.xls,.xlsx,.rar,.zip,.7z,.jpg,.jpeg,.png,.mp4,.pdf"
                multiple
                :limit="1">
              <el-button size="small" class="el-icon-upload">点击上传相应文件</el-button>
              <div slot="tip" class="el-upload__tip">上传word文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="使用当前版本:" prop="name">
            <el-switch
                v-model="value2"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="是"
                inactive-text="否">
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
        <el-button type="primary" size="small" @click="submitForm('editForm',1)">确认并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['visible', 'versionId', 'facilityId'], // facilityId 设备id versionId 版本id
  components: {},
  data() {
    return {
      dialogVisible: this.visible,
      value2: true,
      editForm: {
        facility_id: '', //  	整型 	必填 	1 	- 	设备id
        version: '', // 	字符串 	必填 	1 	- 	版本
        file: '', // 	字符串 	必填 	1 	- 	文件地址
        is_now: '', // 	字符串 	必填 	1 	- 	是否为当前使用0否1是
      }, // 编辑界面数据
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if(this.versionId){
          this.InitFn()
        }
      }
    }
  },
  created() {
  },
  methods: {
    async InitFn() {
      let data = await this.$fetch(this.api.Developmental.faceFacility.version.edit, {id:this.versionId})
      this.editForm.version = data.vo.version;
      this.editForm.file = data.vo.file
      this.value2 = data.vo.is_now?true:false;
    },
    async submitForm() {
      if(!this.editForm.version){
        this.$message.error('填写设备版本')
        return
      }
      if(!this.editForm.file){
        this.$message.error('上传设备文件')
        return
      }
      let url = this.api.Developmental.faceFacility.version.add;
      if (this.versionId) {
        url = this.api.Developmental.faceFacility.version.edit
        this.editForm.id = this.versionId
      }
      this.editForm.facility_id = this.facilityId
      this.editForm.is_now = this.value2 ? 1 : 0;
      let data = await this.$post(url, this.editForm)
      console.log(data)
      if(!data.code){
        this.$emit('updateFn')
        this.closePOpup()
      }

    },
    closePOpup() {
      this.$emit('update:visible', false)
      for(let i in this.editForm){
        this.editForm[i] = ''
      }
    },
    beforeAvatarUpload(file) {
      console.log('上传数据excel：', file)
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      // return isLt2M
    },
    handleSuccess(response) {
      console.log('上传成功后的回调：', response)
      this.editForm.file = response.data.pic
    },
    handleRemove(file, fileList) {
      console.log('移除', file, fileList)
      this.editForm.file = ''
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.popupbody-boxin {
  min-width: 700px;
}
</style>


